

<template>
  <Header></Header>
  <div class="main-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1 class="page-title">动态资讯</h1>
      <p class="page-subtitle">最新动态 · 资讯速递</p>
      <p class="page-description">
        展示城乡一体化示范区的双创工作动态、通知公告、新闻报道、双创风采等新闻资讯信息，
        为社会公众和创业创新群体、政府相关人员提供了解动态资讯信息的渠道。
      </p>
    </div>

    <!-- 最新资讯 -->
    <div class="content-section">
      <div class="section-header">
        <h2 class="section-title">📰 最新资讯</h2>
        <p class="section-subtitle">Latest News</p>
      </div>
      <div class="section-content">
        <div class="news-grid">
          <div class="news-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;">
            <div class="news-image">📢</div>
            <div class="news-info">
              <div class="news-meta">
                <span>2023-11-15</span>
                <span class="news-category">通知公告</span>
              </div>
              <h3 class="news-title">关于开展2023年度创新创业项目申报工作的通知</h3>
              <p class="news-description">
                为贯彻落实国家创新驱动发展战略，推动示范区创新创业发展，现组织开展2023年度创新创业项目申报工作...
              </p>
              <a href="#" class="news-link">查看详情 →</a>
            </div>
          </div>

          <div class="news-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.1s, transform 0.6s 0.1s;">
            <div class="news-image">📰</div>
            <div class="news-info">
              <div class="news-meta">
                <span>2023-11-10</span>
                <span class="news-category">新闻报道</span>
              </div>
              <h3 class="news-title">示范区举办2023年创新创业成果展</h3>
              <p class="news-description">
                11月8日，城乡一体化示范区成功举办2023年创新创业成果展，集中展示了区内50余家企业的创新成果...
              </p>
              <a href="#" class="news-link">查看详情 →</a>
            </div>
          </div>

          <div class="news-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.2s, transform 0.6s 0.2s;">
            <div class="news-image">🎥</div>
            <div class="news-info">
              <div class="news-meta">
                <span>2023-11-05</span>
                <span class="news-category">双创风采</span>
              </div>
              <h3 class="news-title">青年创业者李明：从零到一的创业故事</h3>
              <p class="news-description">
                李明，一位90后创业者，凭借自主研发的智能农业系统，在示范区创业大赛中获得一等奖...
              </p>
              <a href="#" class="news-link">查看详情 →</a>
            </div>
          </div>

          <div class="news-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.3s, transform 0.6s 0.3s;">
            <div class="news-image">📊</div>
            <div class="news-info">
              <div class="news-meta">
                <span>2023-10-28</span>
                <span class="news-category">工作动态</span>
              </div>
              <h3 class="news-title">示范区双创工作推进会顺利召开</h3>
              <p class="news-description">
                10月25日，示范区召开双创工作推进会，总结前三季度工作，部署下一阶段重点任务...
              </p>
              <a href="#" class="news-link">查看详情 →</a>
            </div>
          </div>

          <div class="news-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.4s, transform 0.6s 0.4s;">
            <div class="news-image">🏆</div>
            <div class="news-info">
              <div class="news-meta">
                <span>2023-10-20</span>
                <span class="news-category">双创风采</span>
              </div>
              <h3 class="news-title">示范区企业荣获全国创新创业大赛金奖</h3>
              <p class="news-description">
                在刚刚结束的全国创新创业大赛中，示范区企业"创新科技"凭借"智能环保材料"项目荣获金奖...
              </p>
              <a href="#" class="news-link">查看详情 →</a>
            </div>
          </div>

          <div class="news-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.5s, transform 0.6s 0.5s;">
            <div class="news-image">📝</div>
            <div class="news-info">
              <div class="news-meta">
                <span>2023-10-15</span>
                <span class="news-category">政策解读</span>
              </div>
              <h3 class="news-title">《示范区创新创业扶持政策》解读</h3>
              <p class="news-description">
                为帮助创业者更好地理解《示范区创新创业扶持政策》，我们邀请政策制定专家进行详细解读...
              </p>
              <a href="#" class="news-link">查看详情 →</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 专题栏目 -->
    <div class="content-section">
      <div class="section-header">
        <h2 class="section-title">📌 专题栏目</h2>
        <p class="section-subtitle">Special Topics</p>
      </div>
      <div class="section-content">
        <div class="special-grid">
          <div class="special-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.6s, transform 0.6s 0.6s;">
            <div class="special-header">
              <h3 class="special-title">不忘初心 牢记使命</h3>
              <p class="special-subtitle">专题活动展示</p>
            </div>
            <div class="special-content">
              <div class="special-tabs">
                <div class="special-tab active" data-tab="activity">活动动态</div>
                <div class="special-tab" data-tab="video">宣传视频</div>
                <div class="special-tab" data-tab="gallery">精彩图集</div>
                <div class="special-tab" data-tab="material">活动资料</div>
              </div>

              <div class="special-tab-content active" id="activity">
                <div class="tab-grid">
                  <div class="tab-item" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.7s, transform 0.6s 0.7s;">
                    <div class="tab-icon">📅</div>
                    <h4 class="tab-title">专题学习会</h4>
                    <p class="tab-desc">11月10日举办"不忘初心"专题学习会，邀请党校专家授课</p>
                  </div>
                  <div class="tab-item" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.8s, transform 0.6s 0.8s;">
                    <div class="tab-icon">👥</div>
                    <h4 class="tab-title">主题党日活动</h4>
                    <p class="tab-desc">组织党员干部参观红色教育基地，重温入党誓词</p>
                  </div>
                  <div class="tab-item" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 0.9s, transform 0.6s 0.9s;">
                    <div class="tab-icon">📢</div>
                    <h4 class="tab-title">专题研讨会</h4>
                    <p class="tab-desc">12月5日将举办"牢记使命"专题研讨会，欢迎报名</p>
                  </div>
                </div>
              </div>

              <div class="special-tab-content" id="video">
                <div class="video-container">
                  <!-- 实际应用中替换为真实视频嵌入代码 -->
                  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen=""></iframe>
                </div>
                <p style="text-align: center; color: #666;">"不忘初心 牢记使命"主题宣传片</p>
              </div>

              <div class="special-tab-content" id="gallery">
                <div class="tab-grid">
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 1s, transform 0.6s 1s;">
                    <div class="tab-icon">🖼️</div>
                    <h4 class="tab-title">学习现场</h4>
                    <p class="tab-desc">专题学习会现场照片集锦</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 1.1s, transform 0.6s 1.1s;">
                    <div class="tab-icon">📸</div>
                    <h4 class="tab-title">活动剪影</h4>
                    <p class="tab-desc">主题党日活动精彩瞬间</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 1.2s, transform 0.6s 1.2s;">
                    <div class="tab-icon">🏆</div>
                    <h4 class="tab-title">表彰大会</h4>
                    <p class="tab-desc">优秀党员表彰大会照片</p>
                  </div>
                </div>
              </div>

              <div class="special-tab-content" id="material">
                <div class="tab-grid">
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 1.3s, transform 0.6s 1.3s;">
                    <div class="tab-icon">📄</div>
                    <h4 class="tab-title">学习资料</h4>
                    <p class="tab-desc">专题学习会PPT及参考资料</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 1.4s, transform 0.6s 1.4s;">
                    <div class="tab-icon">📖</div>
                    <h4 class="tab-title">政策文件</h4>
                    <p class="tab-desc">相关政策和指导文件汇编</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 1.5s, transform 0.6s 1.5s;">
                    <div class="tab-icon">✍️</div>
                    <h4 class="tab-title">心得体会</h4>
                    <p class="tab-desc">优秀学习心得分享</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="special-card" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 1.6s, transform 0.6s 1.6s;">
            <div class="special-header">
              <h3 class="special-title">大众创业 万众创新</h3>
              <p class="special-subtitle">创新创业专题</p>
            </div>
            <div class="special-content">
              <div class="special-tabs">
                <div class="special-tab active" data-tab="activity2">活动动态</div>
                <div class="special-tab" data-tab="video2">宣传视频</div>
                <div class="special-tab" data-tab="gallery2">精彩图集</div>
                <div class="special-tab" data-tab="material2">活动资料</div>
              </div>

              <div class="special-tab-content active" id="activity2">
                <div class="tab-grid">
                  <div class="tab-item" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 1.7s, transform 0.6s 1.7s;">
                    <div class="tab-icon">🏆</div>
                    <h4 class="tab-title">创业大赛</h4>
                    <p class="tab-desc">2023年度创新创业大赛正在报名中</p>
                  </div>
                  <div class="tab-item" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 1.8s, transform 0.6s 1.8s;">
                    <div class="tab-icon">💡</div>
                    <h4 class="tab-title">项目路演</h4>
                    <p class="tab-desc">每月定期举办创业项目路演活动</p>
                  </div>
                  <div class="tab-item" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s 1.9s, transform 0.6s 1.9s;">
                    <div class="tab-icon">🎓</div>
                    <h4 class="tab-title">创业培训</h4>
                    <p class="tab-desc">免费创业培训课程每周开课</p>
                  </div>
                </div>
              </div>

              <div class="special-tab-content" id="video2">
                <div class="video-container">
                  <!-- 实际应用中替换为真实视频嵌入代码 -->
                  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen=""></iframe>
                </div>
                <p style="text-align: center; color: #666;">"大众创业 万众创新"宣传片</p>
              </div>

              <div class="special-tab-content" id="gallery2">
                <div class="tab-grid">
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 2s, transform 0.6s 2s;">
                    <div class="tab-icon">📸</div>
                    <h4 class="tab-title">大赛现场</h4>
                    <p class="tab-desc">往届创业大赛精彩瞬间</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 2.1s, transform 0.6s 2.1s;">
                    <div class="tab-icon">👥</div>
                    <h4 class="tab-title">创业团队</h4>
                    <p class="tab-desc">优秀创业团队风采展示</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 2.2s, transform 0.6s 2.2s;">
                    <div class="tab-icon">🏢</div>
                    <h4 class="tab-title">孵化基地</h4>
                    <p class="tab-desc">创业孵化基地环境展示</p>
                  </div>
                </div>
              </div>

              <div class="special-tab-content" id="material2">
                <div class="tab-grid">
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 2.3s, transform 0.6s 2.3s;">
                    <div class="tab-icon">📄</div>
                    <h4 class="tab-title">政策汇编</h4>
                    <p class="tab-desc">创新创业政策文件汇编</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 2.4s, transform 0.6s 2.4s;">
                    <div class="tab-icon">📊</div>
                    <h4 class="tab-title">申报指南</h4>
                    <p class="tab-desc">项目申报流程和指南</p>
                  </div>
                  <div class="tab-item" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s 2.5s, transform 0.6s 2.5s;">
                    <div class="tab-icon">💼</div>
                    <h4 class="tab-title">商业计划书</h4>
                    <p class="tab-desc">优秀商业计划书模板</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 资讯订阅 -->
    <div class="content-section">
      <div class="section-header">
        <h2 class="section-title">📩 资讯订阅</h2>
        <p class="section-subtitle">News Subscription</p>
      </div>
      <div class="section-content">
        <div style="background: linear-gradient(135deg, #f8fbff 0%, #f0f8ff 100%); padding: 40px; border-radius: 12px; text-align: center;">
          <h3 style="color: #1e3c72; margin-bottom: 20px;">订阅最新动态资讯</h3>
          <p style="margin-bottom: 30px; line-height: 1.8; color: #666;">
            订阅我们的资讯服务，第一时间获取示范区双创工作动态、政策解读、活动通知等重要信息。
          </p>
          <form style="max-width: 600px; margin: 0 auto;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
              <div>
                <input type="text" placeholder="姓名" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px;">
              </div>
              <div>
                <input type="email" placeholder="邮箱" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px;">
              </div>
            </div>
            <div style="margin-bottom: 20px;">
              <select style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px;">
                <option value="">选择订阅类型</option>
                <option value="news">新闻资讯</option>
                <option value="policy">政策解读</option>
                <option value="activity">活动通知</option>
                <option value="all">全部内容</option>
              </select>
            </div>
            <button type="submit" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; padding: 12px 30px; border-radius: 30px; font-weight: bold; cursor: pointer; transition: all 0.3s ease;">立即订阅</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import Header from '@/components/sc_header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/sc_footer/App.vue'
import {ref} from "vue";
import img from '@/assets/img/static/fnpt_zszs.png'

const activeKey = ref(0)

const handleSidebarClick = ( key ) => {
  console.log( key );
  activeKey.value=key
}

</script>

<style scoped>


/* 主要内容区域 */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 页面标题区域 */
.page-header {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 0;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.page-title {
  font-size: 36px;
  color: #1e3c72;
  margin-bottom: 15px;
  font-weight: bold;
}

.page-subtitle {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.page-description {
  font-size: 16px;
  color: #555;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

/* 内容区块样式 */
.content-section {
  margin-bottom: 60px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.content-section:hover {
  transform: translateY(-5px);
}

.section-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 25px 30px;
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.section-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.section-content {
  padding: 35px;
}

/* 新闻网格布局 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.news-card {
  background: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(30, 60, 114, 0.15);
  border-color: #4facfe;
}

.news-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
  position: relative;
  overflow: hidden;
}

.news-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="80" r="2.5" fill="rgba(255,255,255,0.1)"/></svg>');
}

.news-info {
  padding: 25px;
}

.news-title {
  font-size: 20px;
  color: #1e3c72;
  font-weight: bold;
  margin-bottom: 12px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #888;
  margin-bottom: 15px;
}

.news-category {
  display: inline-block;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.news-description {
  color: #666;
  line-height: 1.7;
  margin-bottom: 15px;
}

.news-link {
  display: inline-block;
  color: #4facfe;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.news-link:hover {
  color: #1e3c72;
  text-decoration: underline;
}

/* 专题栏目 */
.special-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.special-card {
  background: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}

.special-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(30, 60, 114, 0.15);
}

.special-header {
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  padding: 20px;
  border-bottom: 1px solid #e1e8ed;
}

.special-title {
  font-size: 22px;
  color: #1e3c72;
  font-weight: bold;
  margin-bottom: 10px;
}

.special-subtitle {
  font-size: 14px;
  color: #666;
}

.special-content {
  padding: 25px;
}

.special-tabs {
  display: flex;
  border-bottom: 1px solid #e1e8ed;
  margin-bottom: 20px;
}

.special-tab {
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.special-tab:hover,
.special-tab.active {
  color: #1e3c72;
  border-bottom-color: #4facfe;
}

.special-tab-content {
  display: none;
}

.special-tab-content.active {
  display: block;
}

.tab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.tab-item {
  background: #f8fbff;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.tab-item:hover {
  background: #e1f0ff;
  transform: translateY(-3px);
}

.tab-icon {
  font-size: 24px;
  color: #4facfe;
  margin-bottom: 10px;
}

.tab-title {
  font-size: 16px;
  font-weight: 500;
  color: #1e3c72;
  margin-bottom: 5px;
}

.tab-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* 视频展示区 */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 8px;
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-menu {
    gap: 20px;
  }

  .nav-menu a {
    font-size: 14px;
    padding: 8px 10px;
  }

  .page-title {
    font-size: 28px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .special-grid {
    grid-template-columns: 1fr;
  }

  .main-container {
    padding: 20px 15px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: fadeInUp 0.6s ease-out;
}

.content-section:nth-child(2) {
  animation-delay: 0.1s;
}

.content-section:nth-child(3) {
  animation-delay: 0.2s;
}

.content-section:nth-child(4) {
  animation-delay: 0.3s;
}

</style>